@if ((formSection.visibleChanges | async) || formCompare) {
    @if (formSection.separator; as separator) {
        <div class="header">
            <div class="row g-0 align">
                <div class="col-auto">
                    <button class="btn btn-sm btn-text-secondary" (click)="toggle()" type="button">
                        <i [class.icon-caret-down]="!snapshot.isCollapsed" [class.icon-caret-right]="snapshot.isCollapsed"></i>
                    </button>
                </div>

                <div class="col">
                    <h3>{{ separator.displayName }}</h3>

                    @if (separator.properties.hints && separator.properties.hints.length > 0) {
                        <sqx-form-hint>
                            <span inline="true" optional="true" [sqxMarkdown]="separator.properties.hints"></span>
                        </sqx-form-hint>
                    }
                </div>
            </div>
        </div>
    }
}

<div class="row gx-1" [class.hidden]="snapshot.isCollapsed && !formCompare">
    @for (field of formSection.fields; track field.field.fieldId) {
        <sqx-content-field
            [form]="form"
            [formCompare]="formCompare"
            [formContext]="formContext"
            [formLevel]="formLevel"
            [formModel]="field"
            [formModelCompare]="getFieldFormCompare(field)"
            [isCompact]="isCompact"
            [language]="language"
            (languageChange)="languageChange.emit($event)"
            [languages]="languages"
            [schema]="schema" />
    }
</div>
